<template>
	<view>
		<u-navbar :autoBack="true" leftIconSize="40rpx"  title="抵用券激活" :placeholder="true" bgColor="#fff" :titleStyle="{ fontSize: '30rpx' , fontWeight: 'bold'}"></u-navbar>
		<view class="activableAmountBox">
			<image src="../../../static/icons/voucher-integral.png"></image>
			<text class="title">可激活抵用券:</text>
			<text class="voucher">3.3900</text>
		</view>
		<view class="activateBox">
			<view class="title">激活抵用券</view>
			<view class="amountBox">
				<input type="number" placeholder="请输入激活抵用券数" placeholder-class="amountBoxInputPlaceholder"/>
				<text>全部激活</text>
			</view>
			<text class="tips">激活至抵用券余额</text>
			<button class="confirmActivation">确认激活</button>
		</view>
		<view class="recordBox">
			<view class="noData" v-if="false">
				<image src="../../../static/images/order-noData.png"></image>
				<text>暂无激活记录~</text>
			</view>
			<view class="tableData">
				<view class="itemBox">
					<text class="voucher">57.7000</text>
					<text class="type succeed">激活成功</text>
					<text class="activationTime">激活时间: 2025-01-01 11:29:30</text>
				</view>
				<view class="itemBox">
					<text class="voucher">57.7000</text>
					<text class="type fail">激活失败</text>
					<text class="activationTime">激活时间: 2025-01-01 11:29:30</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.activableAmountBox{
		width: calc(100% - 60rpx);
		float: left;
		margin-top: 20rpx;
		padding: 0rpx 30rpx;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		image{
			width: 60rpx;
			height: 60rpx;
			margin-left: 10rpx;
		}
		.title{
			width: auto;
			float: left;
			margin-left: 10rpx;
			font-size: 35rpx;
			font-weight: bold;
			color: rgb(51, 51, 51);
		}
		.voucher{
			width: auto;
			float: left;
			margin-left: 15rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #ffbc04;
		}
	}
	.activateBox{
		width: calc(100% - 60rpx);
		float: left;
		margin-top: 20rpx;
		padding: 0rpx 30rpx;
		height: 370rpx;
		background-color: #fff;
		.title{
			width: calc(100% - 20rpx);
			float: left;
			height: 50rpx;
			line-height: 50rpx;
			font-size: 30rpx;
			font-weight: 450;
			margin-left: 10rpx;
			margin-top: 15rpx;
			color: rgb(51, 51, 51);
		}
		.amountBox{
			width: calc(100% - 20rpx);
			float: left;
			height: 100rpx;
			margin-left: 10rpx;
			margin-top: 20rpx;
			border-bottom: 1rpx solid #f5f5f5;
			input{
				width:calc(100% - 150rpx);
				float: left;
				height: 100rpx;
				line-height: 110rpx;
				font-size: 35rpx;
			}
			text{
				width: 150rpx;
				float: right;
				height: 100rpx;
				line-height: 110rpx;
				text-align: center;
				color: #ffbc04;
				font-size: 29rpx;
			}
		}
		.tips{
			width: calc(100% - 40rpx);
			float: left;
			height: 70rpx;
			line-height: 70rpx;
			margin-left: 20rpx;
			font-size: 26rpx;
			color: rgb(99, 99, 99);
		}
		.confirmActivation{
			width: calc(100% - 20rpx);
			float: left;
			height: 85rpx;
			line-height: 85rpx;
			margin-left: 10rpx;
			margin-top: 6rpx;
			background-color:#ffbc04;
			color: #fff;
			font-size: 32rpx;
		}
	}
	.recordBox{
		width: 100%;
		position: absolute;
		top: 700rpx;
		background-color: #fff;
		bottom: 0;
		.noData{
			width: 100%;
			height: 100%;
			float: left;
			image{
				width: 320rpx;
				height: 320rpx;
				margin-top: 200rpx;
				position: relative;
				left: 50%;
				margin-left: -160rpx;
			}
			text{
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				float: left;
				font-size: 30rpx;
				font-weight: bold;
				color: #333132;
				text-align: center;
				margin-top: 20rpx;
			}
		}
		.tableData{
			width: 100%;
			height: auto;
			float: left;
			.itemBox{
				width: calc(100% - 80rpx);
				float: left;
				margin-left: 40rpx;
				height: 90rpx;
				border-bottom: 1rpx solid #f5f5f5;
				padding: 20rpx 0rpx;
				.voucher{
					width: 70%;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 39rpx;
					color: #e9515d;
					font-weight: bold;
					float: left;
				}
				.type{
					width: 30%;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 27rpx;
					float: right;
					text-align: right;
				}
				.succeed{
					color: #53c61e;
				}
				.fail{
					color: firebrick;
				}
				.activationTime{
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 25rpx;
					float: left;
					color: rgb(90, 90, 90);
				}
			}
			// .itemBox:last-child{
			// 	border-width: 0rpx;
			// }
		}
	}
</style>
<style>
	.amountBoxInputPlaceholder{
		color: rgb(213, 213, 213);
	}
</style>